﻿@model SRF.Admin.Models.Permission
@{
    Layout = "~/Views/Shared/_Main.cshtml";
}
@using SRF.UI.Html
@section header{
    <link href="@Url.Content("~/Scripts/zTree/css/zTreeStyle/zTreeStyle.css")" rel="stylesheet" type="text/css"/>
    <script src="@Url.Content("~/Scripts/jquery-ui/js/jquery.ui.core.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui/js/jquery.ui.widget.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui/js/jquery.ui.mouse.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui/js/jquery.ui.draggable.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/bootstrap/js/bootstrap-modal.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.cookie.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/dialog.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/zTree/js/jquery.ztree.all-3.5.min.js")" type="text/javascript"></script>
    <style type="text/css">
        .leftpanel
        {
            float: left;
            width: 200px;
            border:1px solid #eee
        }
        .leftpanel select
        {
            width: 100%;
            overflow: hidden;
        }
        .rightpanel
        {
            margin-left: 210px;
        }
        #permissionlist
        {
            min-height:400px;
            border-right:1px solid #eee;
            }
    </style> 
    <script type="text/javascript" language="javascript"> 
        var setting = {
            data: {
                simpleData: {
                    enable: true,
                    rootPId: null
                }
            },
            callback: {
                onClick: function (event, treeId, treeNode) {
                    onSelectNode(treeNode.id, treeNode.type);
                },
                onAsyncSuccess: function (event, treeId, treeNode, msg) {
                    if (treeNode == null) {  //第一次加载时选中根节点
                        var ztree = $.fn.zTree.getZTreeObj(treeId);
                        var rootNode = ztree.getNodes()[0];
                        ztree.expandNode(rootNode);
                        ztree.selectNode(rootNode);
                        onSelectNode(null, null);
                    }
                }
            },
            async: {
                enable: true,
                url: "listdata",
                autoParam: ["id=parentId"],
                dataFilter: filter
            }
        };
        function filter(treeId, parentNode, childNodes) {
            if (!childNodes) return null;
            for (var i = 0; i < childNodes.length; i++) {
                //childNodes[i].icon = "/Content/images/icons_module.png";
            }
            if (!parentNode) {
                childNodes[childNodes.length] = { id: null, pId: "", name: "功能列表" };
            } 

            return childNodes;
        }
        function refreshNode() {
            var zTree = $.fn.zTree.getZTreeObj("permissionlist"),
			nodes = zTree.getSelectedNodes();
            zTree.reAsyncChildNodes(nodes[0], "refresh", true);
        }
        function onSelectNode(id, type) {
            var url = buildUrl("ItemList", { parentId: id || "", parentType: type || "" }, true); 
            $("#permissionItemList").attr("src", url);
        } 
        //初始化
        $(function () {
            $.fn.zTree.init($("#permissionlist"), setting);
        });

    </script>
}
@section toolbar
{ 
}
<div>
    <div class="leftpanel">
        <ul id="permissionlist" class="ztree">
        </ul>
    </div>
    <div class="rightpanel">
        <iframe id="permissionItemList" src="" width="800" height="450" frameborder="0" style="margin-left: 15px">
        </iframe>
    </div>
</div>
